<template>
  <div class="first-map-box">
    <div class="signIconlist">
      <div class="title">
        <img src="../../../../assets/img/fadianchang.png" alt="" />
      <div @click="station()">电站信息</div>
      </div>
      <div class="title-map" id="mapEcharts"></div>
      <div class="title-column" id="titleColumn"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/map/js/china.js";
import eventBus from '@/EventBus';
export default {
  name: "first-map",
  data() {
    return {
      data1: [
        1380, 1385, 1390, 1385, 1390, 1385, 1187, 1280, 1390, 1298, 1380, 1180,
      ],
      data2: [
        1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178, 1112,
      ],
      data3: [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81],
      data4: [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12],
      timer: null,
      cityName: ''
    };
  },
  mounted() {
    this.initEcharts();
    this.titleColumn(this.data1, this.data2, this.data3, this.data4);
    window.addEventListener("resize", () => {
      this.initEcharts();
      this.titleColumn(this.data1, this.data2, this.data3, this.data4);
    });
    let citys = ['黑龙江', '吉林', '四川', '云南', '湖北']
    let index = 0
    let that = this
    this.timer = setInterval(() => {
      let mapEcharts = this.$echarts.init(
        document.getElementById("mapEcharts")
      )
      mapEcharts.setOption({
        series: [
          {
            data: [
              { name: citys[index], value: "1" }
            ]
          }
        ]
      })
      switch (citys[index]) {
        case "黑龙江":
          that.data1 = [
            1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
            1112,
          ];
          that.data2 = [
            801, 815, 910, 815, 1190, 815, 871, 1180, 910, 1198, 810, 810,
          ];
          that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
          that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
          that.titleColumn(that.data1, that.data2, that.data3, that.data4);
          let data5 = [
            [55, 55, 60, 13, 55, 36, 47, 68, 49, 71, 91, 42],
            [46, 75, 110, 22, 60, 70, 42, 20, 10, 73, 92, 68],
            [30, 55, 40, 12, 80, 80, 42, 40, 10, 73, 92, 88]
          ]
          let data6 = [220, 302, 441, 174, 290, 470, 480]
          let data7 = [
            [4, 3, 1, 18],
            [4, 13, 1, 8]
          ]
          let data8 = [
            { value: 8, name: "运行" },
            { value: 7, name: "备用" },
            { value: 13, name: "检修" }
          ]
          let data9 = [
            [212, 135, 113, 122, 132, 115, 118, 212],
            [112, 135, 113, 122, 232, 115, 118, 212]
          ]
          let data10 = [0.95, 0.85]
          let data11 = [320, 232, 201, 234, 290, 130, 320]
          eventBus.$emit('send', 70, data5, data6, data7, data8, data9, data10, data11, citys[index])
          break;
        case "吉林":
          that.data1 = [
            1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
            1112,
          ];
          that.data2 = [
            801, 852, 910, 815, 910, 815, 817, 810, 910, 918, 810, 810,
          ];
          that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
          that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
          that.titleColumn(that.data1, that.data2, that.data3, that.data4);
          data5 = [
            [22, 55, 60, 13, 55, 22, 47, 68, 49, 71, 91, 42],
            [46, 75, 110, 22, 60, 70, 42, 20, 10, 22, 92, 68],
            [30, 55, 40, 12, 22, 80, 42, 40, 10, 22, 92, 88]
          ]
          data6 = [220, 102, 441, 174, 190, 470, 480]
          data7 = [
            [4, 7, 1, 18],
            [4, 13, 1, 8]
          ]
          data8 = [
            { value: 8, name: "运行" },
            { value: 12, name: "备用" },
            { value: 13, name: "检修" }
          ]
          data9 = [
            [212, 222, 113, 122, 132, 115, 118, 212],
            [112, 135, 113, 122, 232, 115, 222, 212]
          ]
          data10 = [0.25, 0.15]
          data11 = [220, 232, 201, 234, 290, 230, 220]
          eventBus.$emit('send', 60, data5, data6, data7, data8, data9, data10, data11, citys[index])
          break;
        case "四川":
          that.data1 = [
            1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
            1112,
          ];
          that.data2 = [
            850, 760, 563, 820, 900, 885, 1287, 1380, 1190, 1198, 1420, 1240,
          ];
          that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
          that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
          that.titleColumn(that.data1, that.data2, that.data3, that.data4);
          data5 = [
            [22, 55, 60, 13, 55, 22, 47, 68, 49, 71, 91, 42],
            [26, 75, 120, 22, 60, 70, 42, 22, 10, 22, 102, 68],
            [30, 55, 40, 12, 22, 80, 42, 40, 10, 22, 92, 88]
          ]
          data6 = [120, 102, 441, 174, 190, 470, 480]
          data7 = [
            [14, 7, 1, 18],
            [4, 13, 1, 8]
          ]
          data8 = [
            { value: 8, name: "运行" },
            { value: 12, name: "备用" },
            { value: 3, name: "检修" }
          ]
          data9 = [
            [112, 222, 113, 122, 132, 115, 118, 212],
            [112, 135, 113, 122, 232, 115, 222, 212]
          ]
          data10 = [0.55, 0.15]
          data11 = [120, 232, 201, 234, 290, 230, 220]
          eventBus.$emit('send', 90, data5, data6, data7, data8, data9, data10, data11, citys[index])
          break;
        case "云南":
          that.data1 = [
            1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
            1112,
          ];
          that.data2 = [
            1280, 1285, 1210, 1285, 1290, 1285, 1287, 1280, 1290, 1298, 1280,
            1280,
          ];
          that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
          that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
          that.titleColumn(that.data1, that.data2, that.data3, that.data4);
          data5 = [
            [62, 55, 60, 13, 55, 22, 47, 68, 49, 71, 51, 42],
            [26, 75, 120, 22, 60, 70, 42, 22, 10, 22, 102, 68],
            [30, 55, 40, 12, 52, 80, 42, 40, 10, 42, 92, 88]
          ]
          data6 = [320, 102, 441, 174, 190, 470, 480]
          data7 = [
            [14, 7, 1, 18],
            [4, 3, 1, 8]
          ]
          data8 = [
            { value: 8, name: "运行" },
            { value: 2, name: "备用" },
            { value: 3, name: "检修" }
          ]
          data9 = [
            [12, 222, 113, 22, 132, 115, 118, 212],
            [112, 135, 113, 122, 232, 115, 222, 212]
          ]
          data10 = [0.55, 0.25]
          data11 = [200, 232, 201, 234, 290, 230, 220]
          eventBus.$emit('send', 30, data5, data6, data7, data8, data9, data10, data11, citys[index])
          break;
        case "湖北":
          that.data1 = [
            1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
            1112,
          ];
          that.data2 = [
            1180, 1185, 1190, 1185, 1190, 1185, 1187, 1180, 1190, 1198, 1180,
            1180,
          ];
          that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
          that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
          that.titleColumn(that.data1, that.data2, that.data3, that.data4);
          data5 = [
            [82, 55, 60, 13, 55, 22, 47, 68, 49, 71, 51, 42],
            [26, 75, 120, 22, 80, 70, 42, 22, 10, 22, 102, 68],
            [30, 55, 40, 12, 52, 80, 42, 80, 10, 42, 92, 88]
          ]
          data6 = [380, 102, 481, 174, 190, 470, 480]
          data7 = [
            [14, 7, 1, 18],
            [4, 8, 1, 8]
          ]
          data8 = [
            { value: 8, name: "运行" },
            { value: 8, name: "备用" },
            { value: 3, name: "检修" }
          ]
          data9 = [
            [82, 222, 183, 22, 132, 115, 118, 212],
            [182, 185, 113, 122, 232, 115, 222, 212]
          ]
          data10 = [0.85, 0.25]
          data11 = [280, 232, 201, 234, 290, 230, 220]
          eventBus.$emit('send', 80, data5, data6, data7, data8, data9, data10, data11, citys[index])
          break;
      }
      index++
      if (index === 5) index = 0
    }, 60000)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initEcharts() {
      let that = this;
      let mapEcharts = this.$echarts.init(
        document.getElementById("mapEcharts")
      );
      window.addEventListener("resize", function () {
        mapEcharts.resize();
      });
      mapEcharts.on("click", (res) => {
        this.cityName = res.name
        switch (res.name) {
          case "黑龙江":
            that.data1 = [
              1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
              1112,
            ];
            that.data2 = [
              801, 815, 910, 815, 1190, 815, 871, 1180, 910, 1198, 810, 810,
            ];
            that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
            that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
            that.titleColumn(that.data1, that.data2, that.data3, that.data4);
            let data5 = [
              [55, 55, 60, 13, 55, 36, 47, 68, 49, 71, 91, 42],
              [46, 75, 110, 22, 60, 70, 42, 20, 10, 73, 92, 68],
              [30, 55, 40, 12, 80, 80, 42, 40, 10, 73, 92, 88]
            ]
            let data6 = [220, 302, 441, 174, 290, 470, 480]
            let data7 = [
              [4, 3, 1, 18],
              [4, 13, 1, 8]
            ]
            let data8 = [
              { value: 8, name: "运行" },
              { value: 7, name: "备用" },
              { value: 13, name: "检修" }
            ]
            let data9 = [
              [212, 135, 113, 122, 132, 115, 118, 212],
              [112, 135, 113, 122, 232, 115, 118, 212]
            ]
            let data10 = [0.95, 0.85]
            let data11 = [320, 232, 201, 234, 290, 130, 320]
            eventBus.$emit('send', 70, data5, data6, data7, data8, data9, data10, data11, res.name)
            break;
          case "吉林":
            that.data1 = [
              1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
              1112,
            ];
            that.data2 = [
              801, 852, 910, 815, 910, 815, 817, 810, 910, 918, 810, 810,
            ];
            that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
            that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
            that.titleColumn(that.data1, that.data2, that.data3, that.data4);
            data5 = [
              [22, 55, 60, 13, 55, 22, 47, 68, 49, 71, 91, 42],
              [46, 75, 110, 22, 60, 70, 42, 20, 10, 22, 92, 68],
              [30, 55, 40, 12, 22, 80, 42, 40, 10, 22, 92, 88]
            ]
            data6 = [220, 102, 441, 174, 190, 470, 480]
            data7 = [
              [4, 7, 1, 18],
              [4, 13, 1, 8]
            ]
            data8 = [
              { value: 8, name: "运行" },
              { value: 12, name: "备用" },
              { value: 13, name: "检修" }
            ]
            data9 = [
              [212, 222, 113, 122, 132, 115, 118, 212],
              [112, 135, 113, 122, 232, 115, 222, 212]
            ]
            data10 = [0.25, 0.15]
            data11 = [220, 232, 201, 234, 290, 230, 220]
            eventBus.$emit('send', 60, data5, data6, data7, data8, data9, data10, data11, res.name)
            break;
          case "四川":
            that.data1 = [
              1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
              1112,
            ];
            that.data2 = [
              850, 760, 563, 820, 900, 885, 1287, 1380, 1190, 1198, 1420, 1240,
            ];
            that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
            that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
            that.titleColumn(that.data1, that.data2, that.data3, that.data4);
            data5 = [
              [22, 55, 60, 13, 55, 22, 47, 68, 49, 71, 91, 42],
              [26, 75, 120, 22, 60, 70, 42, 22, 10, 22, 102, 68],
              [30, 55, 40, 12, 22, 80, 42, 40, 10, 22, 92, 88]
            ]
            data6 = [120, 102, 441, 174, 190, 470, 480]
            data7 = [
              [14, 7, 1, 18],
              [4, 13, 1, 8]
            ]
            data8 = [
              { value: 8, name: "运行" },
              { value: 12, name: "备用" },
              { value: 3, name: "检修" }
            ]
            data9 = [
              [112, 222, 113, 122, 132, 115, 118, 212],
              [112, 135, 113, 122, 232, 115, 222, 212]
            ]
            data10 = [0.55, 0.15]
            data11 = [120, 232, 201, 234, 290, 230, 220]
            eventBus.$emit('send', 90, data5, data6, data7, data8, data9, data10, data11, res.name)
            break;
          case "云南":
            that.data1 = [
              1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
              1112,
            ];
            that.data2 = [
              1280, 1285, 1210, 1285, 1290, 1285, 1287, 1280, 1290, 1298, 1280,
              1280,
            ];
            that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
            that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
            that.titleColumn(that.data1, that.data2, that.data3, that.data4);
            data5 = [
              [62, 55, 60, 13, 55, 22, 47, 68, 49, 71, 51, 42],
              [26, 75, 120, 22, 60, 70, 42, 22, 10, 22, 102, 68],
              [30, 55, 40, 12, 52, 80, 42, 40, 10, 42, 92, 88]
            ]
            data6 = [320, 102, 441, 174, 190, 470, 480]
            data7 = [
              [14, 7, 1, 18],
              [4, 3, 1, 8]
            ]
            data8 = [
              { value: 8, name: "运行" },
              { value: 2, name: "备用" },
              { value: 3, name: "检修" }
            ]
            data9 = [
              [12, 222, 113, 22, 132, 115, 118, 212],
              [112, 135, 113, 122, 232, 115, 222, 212]
            ]
            data10 = [0.55, 0.25]
            data11 = [200, 232, 201, 234, 290, 230, 220]
            eventBus.$emit('send', 30, data5, data6, data7, data8, data9, data10, data11, res.name)
            break;
          case "湖北":
            that.data1 = [
              1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178,
              1112,
            ];
            that.data2 = [
              1180, 1185, 1190, 1185, 1190, 1185, 1187, 1180, 1190, 1198, 1180,
              1180,
            ];
            that.data3 = [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78, 12];
            that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
            that.titleColumn(that.data1, that.data2, that.data3, that.data4);
            data5 = [
              [82, 55, 60, 13, 55, 22, 47, 68, 49, 71, 51, 42],
              [26, 75, 120, 22, 80, 70, 42, 22, 10, 22, 102, 68],
              [30, 55, 40, 12, 52, 80, 42, 80, 10, 42, 92, 88]
            ]
            data6 = [380, 102, 481, 174, 190, 470, 480]
            data7 = [
              [14, 7, 1, 18],
              [4, 8, 1, 8]
            ]
            data8 = [
              { value: 8, name: "运行" },
              { value: 8, name: "备用" },
              { value: 3, name: "检修" }
            ]
            data9 = [
              [82, 222, 183, 22, 132, 115, 118, 212],
              [182, 185, 113, 122, 232, 115, 222, 212]
            ]
            data10 = [0.85, 0.25]
            data11 = [280, 232, 201, 234, 290, 230, 220]
            eventBus.$emit('send', 80, data5, data6, data7, data8, data9, data10, data11, res.name)
            break;
          //   default:
          //     that.data1 =   [801, 851, 901, 851, 901, 851, 871, 801, 901, 981, 801, 801]
          //     that.data2 =  [1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178, 1112]
          //     that.data3 =  [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78,12];
          //   that.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
          // that.titleColumn(that.data1,that.data2);
        }
        mapEcharts.setOption({
          series: [
            {
              data: [
                { name: this.cityName, value: "1" }
              ]
            }
          ]
        })
      });
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res * fontSize;
      }
      mapEcharts.setOption({
        tooltip: {
          show: false,
        },
        dataRange: {
          show: false,
          x: "left",
          y: "top",
          splitList: [{ start: 1, end: 5, color: "#808c64" }],
        },
        geo: {
          map: "china",
          roam: false, // 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              // show: true, //关闭省份名展示
              // fontSize: 20,
              color: "c8000a",
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#17313d",
              borderColor: "#17313d",
              borderWidth: 3, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 12,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.3)",
            },
            emphasis: {
              areaColor: "#005fb5",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 1)",
            },
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            layoutSize: "65%", //大小
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
                color: "rgba(255,255,255,0.3)",
              },
              emphasis: {
                show: true,
                color: "rgba(255,255,255,1)",
              },
            },
            silent: true, //禁用地图的hover事件
            itemStyle: {
              normal: {
                areaColor: "#244851",
                borderColor: "#4bd6dd",
                borderWidth: 2, //设置外层边框
              },
              emphasis: {
                areaColor: "rgba(128,140,100,0.3)",
                borderWidth: 3,
                borderColor: "rgba(128,140,100,0.3)",
                shadowOffsetX: 0,
                shadowOffsetY: 3,
                shadowBlur: 2,
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            data: [
              // { name: "黑龙江", value: "1" },
              // { name: "吉林", value: "1" },
              // { name: "四川", value: "1" },
              // { name: "湖北", value: "1" },
              // { name: "云南", value: "1" },
            ],
          },

          {
            name: "化工公司",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: [],
            symbolSize: 15,

            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#c8000a",
              period: 5,
              scale: 4,
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
              color: "#ffffff",
              fontSize: fontSize(3),
              //   fontSize: 30,
              fontWeight: 600,
              padding: [0, 0, 0, 10],
            },
            itemStyle: {
              color: "#c8000a",
              shadowBlur: 2,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
      });
    },
    titleColumn(data1, data2, data3, data4) {
      let titleColumn = this.$echarts.init(
        document.getElementById("titleColumn")
      );
      window.addEventListener("resize", function () {
        titleColumn.resize();
      });

      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res * fontSize;
      }
      titleColumn.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(76, 121, 211, 0.5)",
          borderColor: "rgba(255, 255, 255, 0.4)",
          textStyle: {
            color: "#CFE3FC",
          },
          borderWidth: 1,
          formatter: (params) => {
            let rander = params
              .map((item) =>
                item.seriesType !== "pictorialBar"
                  ? `<div>${item.seriesName}: ${
                      item.seriesType !== "line" ? item.value : item.value + "%"
                    }</div>`
                  : ""
              )
              .join("");
            return `
            <div>${params[0].axisValue}</div>
            ${rander}
        `;
          },
        },
        legend: [
          {
            data: ["计划值"],
            top: "2%",
            x: "20%",
            // itemWidth: 14,
            itemWidth: fontSize(1.4),
            itemHeight: fontSize(1.4),
            borderColor: "rgba(72, 130, 167, 1)",
            textStyle: {
              color: "#c1cadf",
              fontSize: fontSize(2),
              //   fontSize: 20
            },
          },
          {
            data: ["实际完成"],
            top: "2%",
            x: "25%",
            itemWidth: fontSize(1.4),
            itemHeight: fontSize(1.4),

            textStyle: {
              color: "#c1cadf",
              fontSize: fontSize(2),
              //   fontSize: 20
            },
          },
          {
            data: ["同比"],
            x: "40%",
            top: "2%",
            itemStyle: {
              //   borderWidth: 2
              borderWidth: fontSize(0.02),
              borderHeight: fontSize(0.02),
            },
            textStyle: {
              color: "#c1cadf",

              fontSize: fontSize(2),
              //   fontSize: 20
            },
          },
          {
            data: ["环比"],
            x: "50%",
            top: "2%",
            itemStyle: {
              //   borderWidth: 2,
              borderWidth: fontSize(0.02),
              borderHeight: fontSize(0.02),
            },
            textStyle: {
              color: "#c1cadf",
              fontSize: fontSize(2),
              //   fontSize: 20
            },
          },
        ],
        grid: {
          left: "2%",
          right: "2%",
          top: "19%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          x: "right",
          y: "center",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLine: {
              lineStyle: {
                color: "rgba(51, 176, 255, 1)",
              },
            },
            axisLabel: {
              interval: 0,
              color: "rgba(207, 227, 252, 1)",
              fontSize: fontSize(2),
              //   fontSize: 20
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(120, 160, 236, 1)",
              },
              symbol: ["none", "arrow"],
              //   symbolSize: [5, 12],
              symbolSize: [fontSize(0.5), fontSize(1.2)],
              symbolOffset: [0, 10],
            },

            axisLabel: {
              interval: 0,
              color: "rgba(207, 227, 252, 1)",
            },
            splitLine: {
              show: false,
              lineStyle: {
                // color: 'rgba(39, 57, 75, 1)',
                width: 1,
                type: "solid",
              },
            },
          },
          {
            type: "value",
            axisTick: {
              show: true,
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(20, 27, 252, 1)",
              },
              symbol: ["none", "arrow"],
              //   symbolSize: [5, 12],
              symbolSize: [fontSize(0.5), fontSize(1.2)],
              symbolOffset: [0, 10],
            },
            min: 0,
            max: 102,
            axisLabel: {
              interval: 0,
              color: "rgba(207, 227, 252, 1)",
              formatter: "{value} %",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(39, 57, 75, 1)",
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "同比",
            yAxisIndex: 1,
            type: "line",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 241, 74, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(88, 87, 50, 0)",
                },
              ]),
            },
            data: data3,
            symbol: "circle",
            symbolSize: fontSize(0.8),
            itemStyle: {
              normal: {
                color: "rgba(255, 241, 74, 1)",
                borderColor: "rgba(255, 241, 74, 1)",
                lineStyle: {
                  color: "rgba(255, 241, 74, 1)",
                },
              },
            },
          },
          {
            name: "环比",
            yAxisIndex: 1,
            type: "line",
            smooth: true,

            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255, 86, 35, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(75, 56, 49, 0)",
                },
              ]),
            },
            data: this.data4,
            symbol: "circle",
            symbolSize: fontSize(0.8),
            itemStyle: {
              normal: {
                color: "rgba(255, 86, 35, 1)",
                borderColor: "rgba(255, 86, 35, 1)",
                lineStyle: {
                  color: "rgba(255, 86, 35, 1)",
                },
              },
            },
          },
          {
            label: {
              show: true,
              position: "top", // 位置
              color: "#FFF",
              fontSize: fontSize(1.4),
              fontWeight: "bold", // 加粗
              distance: 5, // 距离
            }, // 柱子上方的数值
            type: "bar",

            yAxisIndex: 0,
            name: "计划值",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(73, 137, 253, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(44, 62, 98, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            barWidth: "24%",
            data: data1,
          },
          {
            label: {
              show: true,
              position: "top", // 位置
              color: "#FFF",
              fontSize: fontSize(1.4),
              // fontSize: 14,
              fontWeight: "bold", // 加粗
              distance: 5, // 距离
            }, // 柱子上方的数值
            type: "bar",

            yAxisIndex: 0,
            name: "实际完成",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(84, 209, 255, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(36, 54, 232, 82)",
                    },
                  ],
                  false
                ),
              },
            },
            barWidth: "24%",
            data: data2,
          },
        ],
      });
    },
    station(){
      this.data1 =   [801, 851, 901, 851, 901, 851, 871, 801, 901, 981, 801, 801]
      this.data2 =  [1152, 1123, 1121, 1132, 1114, 1135, 1113, 1122, 1132, 1145, 1178, 1112]
      this.data3 =  [52, 23, 21, 32, 14, 35, 13, 22, 32, 45, 78,12];
      this.data4 = [80, 81, 91, 81, 90, 81, 87, 80, 91, 98, 81, 81];
      this.titleColumn(this.data1, this.data2, this.data3, this.data4);
      let data5 = [
        [25, 55, 60, 13, 55, 36, 47, 68, 49, 71, 91, 42],
        [46, 75, 110, 22, 60, 70, 22, 20, 10, 73, 92, 68],
        [30, 55, 40, 12, 80, 80, 42, 40, 10, 23, 92, 88]
      ]
      let data6 = [220, 302, 441, 174, 290, 470, 180]
      let data7 = [
        [8, 3, 1, 18],
        [4, 13, 1, 8]
      ]
      let data8 = [
        { value: 8, name: "运行" },
        { value: 10, name: "备用" },
        { value: 13, name: "检修" }
      ]
      let data9 = [
        [212, 135, 113, 122, 132, 115, 118, 112],
        [112, 135, 213, 122, 232, 115, 118, 212]
      ]
      let data10 = [0.15, 0.25]
      let data11 = [220, 232, 201, 234, 290, 130, 120]
      eventBus.$emit('send', 70, data5, data6, data7, data8, data9, data10, data11)
    }
  },
  watch: {
    data1(val) {
      this.data1 = val;
    },
  },
};
</script>

<style scoped lang="scss" type="text/scss">
.first-map-box {
  width: 100%;
  height: 3240px;
  //   background-color: rgb(79, 55, 55);
  .signIconlist {
    width: 100%;
    height: 100%;
    .title {
      margin-top: 110px;
      width: 100%;
      margin-left: 0;
      height: 217px;
      line-height: 217px;
      padding-left: 65px;
      font-size: 145px;

      background-color: #1a2a44;

      color: #e3f6fa;
div{
  // float: left;
  padding-left: 165px;
    margin-top: -210px;
}
      img {
        width: 145px;
      }
     
    }
    .title-map {
      width: 100%;
      height: 2400px;
      //   background-color: #fff;
    }
    .title-column {
      width: 100%;
      height: 505px;
      //   background-color: rgb(120, 83, 216);
    }
  }
  #mapEcharts {
    width: 100%;
    height: 2400px;
  }
  #titleColumn {
    width: 100%;
    height: 505px;
  }
}
</style>
